<div class="flex my-4 border-b border-gray-200">
    <div class="w-16">
        <img class="p-2 rounded rounded-full"
             src="https://secure.gravatar.com/avatar/299a0beca96518fa83eb887e0f57957a?s=96&d=mm&r=g">
    </div>
    <div class="flex-grow ">
        <header>
            <a href="#" class="text-black no-underline">
                <span class="font-medium text-gray-700">{{.comment.author_name}}</span>
            </a>
            <div class="text-xs text-grey flex items-center my-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="h-4 w-4 mr-1 feather feather-calendar">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
                <span class="text-gray-700">{{.comment.created_at}}</span>
            </div>
        </header>
        <article class="py-2 text-gray-900">
            {{.comment.content}}
        </article>
        <footer class="text-sm flex py-2 ">
            <a class="block no-underline text-gray-700 flex items-center hover:text-gray-900 cursor-pointer reply-btn" data-id="{{.comment.id}}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="feather feather-message-circle h-6 w-6 mr-1">
                    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                </svg>
                <span>Reply</span>
            </a>
        </footer>
        {{ include (themeFile "inc/comment/list.html") (mergeObj "post" .post "Cookie" .Cookie  "comment" .comment)}}
        <div class="flex hidden reply-area" data-id="{{.comment.id}}" >
            <div class="container mx-auto m-4">
                <div class="w-full px-5 py-3 bg-white">
                    {{ include (themeFile "inc/comment/reply.html") (mergeObj "post" .post "Cookie" .Cookie  "comment" .comment)}}
                </div>
            </div>
        </div>
    </div>
</div>